<template>
  <van-cell-group id="Videos">
    <van-cell
      v-for="(item, index) in list"
      :key="index"
      :title="item.name"
      style="text-overflow: ellipsis;overflow: hidden;"
      :id="index"
    >
      <van-icon slot="right-icon" name="close" class="van-cell__right-icon" @click="deleteVideo(item.id, index)"/>
    </van-cell>
  </van-cell-group>
</template>

<script>
  import {Cell, CellGroup, Icon, Dialog} from 'vant';

  export default {
    name: "Videos",
    components: {
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Icon.name]: Icon,
      [Dialog.name]: Dialog,
    },
    props: ["videoStatus"],
    data() {
      return {
        list: [],
      }
    },
    methods: {
      getVideo() {
        let _this = this;
        let token = _this.getCookie("token");
        _this.$http.get(_this.apiUrl("exam"), {
          headers: {
            'token': token,
            'sid': _this.$route.query.sid
          }
        }).then((res) => {
          // console.log(res.data.data);
          _this.list = res.data.data;
        });
      },
      deleteVideo(id, index) {
        let _this = this;
        Dialog.confirm({
          title: '您确定要删除吗？',
        }).then(() => {
          let token = _this.getCookie("token");
          let data = _this.$qs.stringify({
            'id': id
          });
          _this.$http.delete(_this.apiUrl('user/exam/delVideo'), {
            data: data,
            headers: {
              'token': token,
              'sid': _this.$route.query.sid
            }
          }).then((res) => {
            // console.log(res.data);
            _this.list.splice(index, 1);
            _this.audioPlay();
          });
        }).catch(() => {
        });
      },
      audioPlay() {
        let _this = this;
        let RandomStr = _this.randomWord(true, 10, 20);
        _this.$emit('VideoStatus', RandomStr);
      },
    },
    mounted() {
      let _this = this;
      _this.getVideo();
    },
    watch: {
      "videoStatus": function () {
        let _this = this;
        _this.getVideo();
      }
    }
  }
</script>
<style>
  #Videos .van-cell__title, #Videos .van-cell__value {
    flex: none;
  }

  #Videos .van-cell__title {
    width: 95%;
  }

  #Videos .van-cell__value {
    width: 0%;
  }
</style>
<style scoped>

</style>
